<template>
    <view class="wrapper" :style="{ 'padding-top': keyboardHeight }">
        <!-- <robin-editor-header class="header" @cancel="cancel" @save="save" :labelConfirm="labelConfirm" :labelCancel="labelCancel"></robin-editor-header> -->
		<view :style="'height:' + editorHeight" class="container" v-if="!previewMode" v-show="!showPreview">
		    <editor
		        v-if="!previewMode"
		        v-show="!showPreview"
		        id="editor"
		        class="ql-container"
		        placeholder="开始输入..."
		        showImgSize
		        showImgToolbar
		        showImgResize
		        @statuschange="onStatusChange"
		        :read-only="readOnly"
		        @ready="onEditorReady"
				@input="getContents"
		    ></editor>
		</view>
		<!-- @tap="format" -->
		<!-- v-if="!showPreview" -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="toolbar" v-if="!showPreview" v-show="keyboardHeight || !autoHideToolbar" :style="'bottom:' + (isIOS ? keyboardHeight : 0) + 'px'" style="bottom: -33px!important;">
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->	
		<view class="toolbar" v-if="!showPreview" v-show="keyboardHeight || !autoHideToolbar" style="bottom: -33px!important;">
		<!-- #endif -->
		    <block v-for="(t, i) in tools" :key="i">
				<!-- #ifdef MP-WEIXIN -->
				<picker v-if="t == 'lineheight'" class="iconfont" mode="selector" :range="lineHeightRange" range-key="key" @change="lineHeight"><view class="icon-line-height"><text class="font-text">行高</text></view></picker>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view v-if="t == 'lineheight'" class="iconfont icon-line-height" @click="changeSize(t)"><text class="font-text">行高</text></view>
				<!-- #endif -->
		        <!-- <view v-if="t == 'underline'" :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline" data-label="下滑线"></view> -->
		        <!-- <view v-if="t == 'strike'" :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike" data-label="删除线"></view> -->
		        <!-- <view
		            v-if="t == 'align-left'"
		            :class="formats.align === 'left' || !formats.align ? 'ql-active' : ''"
		            class="iconfont icon-zuoduiqi"
		            data-name="align"
		            data-value="left"
		            data-label="居左"
		        ></view>
		        <view
		            v-if="t == 'align-center'"
		            :class="formats.align === 'center' ? 'ql-active' : ''"
		            class="iconfont icon-juzhongduiqi"
		            data-name="align"
		            data-value="center"
		            data-label="居中"
		        ></view>
		        <view
		            v-if="t == 'align-right'"
		            :class="formats.align === 'right' ? 'ql-active' : ''"
		            class="iconfont icon-youduiqi"
		            data-name="align"
		            data-value="right"
		            data-label="居右"
		        ></view>
		        <view
		            v-if="t == 'align-justify'"
		            :class="formats.align === 'justify' ? 'ql-active' : ''"
		            class="iconfont icon-zuoyouduiqi"
		            data-name="align"
		            data-value="justify"
		            data-label="平铺"
		        ></view> -->
				<!-- <view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight" data-value="2"></view>
		            <view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing"
		                     data-value="2em"></view>
		            <view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop"
		                     data-value="20px"></view>
		            <view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
		                     data-name="marginBottom" data-value="20px"></view> -->
		        <!-- <view v-if="t == 'remove'" class="iconfont icon-clearedformat" @tap.stop="removeFormat"></view> -->
				<!-- #ifdef MP-WEIXIN -->
		        <picker v-if="t == 'font'" class="iconfont" mode="selector" :range="fontSizeRange" @change="fontSize"><view class="icon-fontsize"><text class="font-text">字号</text></view></picker>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view v-if="t == 'font'" class="iconfont icon-fontsize" @click="changeSize(t)"><text class="font-text">字号</text></view>
				<!-- #endif -->
		        <view
		            v-if="t == 'color'"
		            :style="fontColor != '#FFFFFF' ? 'color:' + formats.color : ''"
		            class="iconfont icon-text_color"
		            data-name="color"
		            @tap.stop="openColor"
		        ><text class="font-text">颜色</text></view>
		        <view
		            v-if="t == 'backgroundColor'"
		            :style="bgColor ? 'color:' + formats.backgroundColor : ''"
		            class="iconfont icon-fontbgcolor"
		            data-name="backgroundColor"
		            @tap.stop="openColor"
		        ><text class="font-text">背景</text></view>
				<view v-if="t == 'bold'" :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold" data-label="加粗" @click="addBold"><text class="font-text">加粗</text></view>
				<view v-if="t == 'italic'" :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic" data-label="斜体" @click="addItalic"><text class="font-text">斜体</text></view>
		        <!-- <view v-if="t == 'image'" class="iconfont icon-charutupian" @tap.stop="insertImage"></view> -->
		        <!-- <view v-if="t == 'clear'" class="iconfont icon-shanchu" @tap.stop="clear"></view> -->
		        <!-- <view v-if="t == 'preview'" class="iconfont icon-preview" @tap.stop="preview"></view> -->
		        <!-- <view v-if="t == 'date'" class="iconfont icon-date" @tap="insertDate"></view> -->
		        <!-- <view v-if="t == 'list-check'" class="iconfont icon-checklist" data-name="list" data-value="check"></view> -->
		        <!-- <view
		            v-if="t == 'list-ordered'"
		            :class="formats.list === 'ordered' ? 'ql-active' : ''"
		            class="iconfont icon-youxupailie"
		            data-name="list"
		            data-value="ordered"
		        ></view> -->
		        <!-- <view v-if="t == 'list-bullet'" :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view> -->
		        <!-- <view v-if="t == 'undo'" class="iconfont icon-undo" @tap="undo"></view> -->
		        <!-- <view v-if="t == 'redo'" class="iconfont icon-redo" @tap="redo"></view> -->
		        <!-- <view v-if="t == 'outdent'" class="iconfont icon-outdent" data-name="indent" data-value="-1"></view> -->
		        <!-- <view v-if="t == 'indent'" class="iconfont icon-indent" data-name="indent" data-value="+1"></view> -->
		        <!-- <view v-if="t == 'divider'" class="iconfont icon-fengexian" @tap="insertDivider"></view> -->
		        <!-- <view v-if="t == 'h1'" :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view> -->
		        <!-- <view v-if="t == 'h2'" :class="formats.header === 2 ? 'ql-active' : ''" class="iconfont icon-format-header-2" data-name="header" :data-value="2"></view> -->
		        <!-- <view v-if="t == 'h3'" :class="formats.header === 3 ? 'ql-active' : ''" class="iconfont icon-format-header-3" data-name="header" :data-value="3"></view> -->
		        <!-- <view v-if="t == 'h4'" :class="formats.header === 4 ? 'ql-active' : ''" class="iconfont icon-format-header-4" data-name="header" :data-value="4"></view> -->
		        <!-- <view v-if="t == 'h5'" :class="formats.header === 5 ? 'ql-active' : ''" class="iconfont icon-format-header-5" data-name="header" :data-value="5"></view> -->
		        <!-- <view v-if="t == 'h6'" :class="formats.header === 6 ? 'ql-active' : ''" class="iconfont icon-format-header-6" data-name="header" :data-value="6"></view> -->
		        <!-- <view v-if="t == 'sub'" :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view> -->
		        <!-- <view v-if="t == 'super'" :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view> -->
		        <!-- <view
		            v-if="t == 'rtl'"
		            :class="formats.direction === 'rtl' ? 'ql-active' : ''"
		            class="iconfont icon-direction-rtl"
		            data-name="direction"
		            :data-value="formats.direction === 'rtl' ? '' : 'rtl'"
		        ></view> -->
		    </block>
		</view>
        <uni-popup type="bottom" ref="popup" @change="change"><robin-color-picker :color="color" @confirm="colorChanged" ref="color"></robin-color-picker></uni-popup>
		<uni-popup ref="picker" type="bottom" style="width: 100%;">
			<view style="width: 100%; height: 64upx; line-height: 64upx; text-align: center;" v-for="(item, index) in sizeRange" :key="index" :class="current == index ? 'ql-active' : ''" @click="selectSize(item)">{{item.key ? item.key : item}}</view>
		</uni-popup>
        <!-- <view class="preview" v-show="showPreview"><rich-text :nodes="htmlData" class="previewNodes"></rich-text></view> -->
    </view>
</template>

<script>
import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup';
export default {
    props: {
        value: {
            type: String
        },
        imageUploader: {
            type: Function
        },
        muiltImage: {
            type: Boolean,
            default: false
        },
        compressImage: {
            type: Boolean,
            default: false
        },
        previewMode: {
            type: Boolean,
            default: false
        },
        autoHideToolbar: {
            type: Boolean,
            default: false
        },
        tools: {
            type: Array,
            default: function() {
                return [
					'lineheight',
                    // 'underline',
                    // 'strike',
                    // 'align-left',
                    // 'align-center',
                    // 'align-right',
                    // 'remove',
                    'font',
                    'color',
                    'backgroundColor',
                    'bold',
                    'italic',
                    // 'image',
                    // 'clear',
                    // 'preview'
                ];
            }
        }
    },
    components: {UniPopup},
	data() {
        return {
            show: true,
            readOnly: false,
            formats: {},
            fontColor: '#000000',
            bgColor: '',
            color: '',
            colorPickerName: '',
            showColor: true,
            fontSizeRange: [10, 12, 14, 16, 18, 24, 32],
			lineHeightRange: [{key:'1倍',value:1},{key:'1.5倍',value:1.5},{key:'2倍',value:2},{key:'2.5倍',value:2.5},{key:'3倍',value:3},{key:'3.5倍',value:3.5}],
			sizeRange: [],
            showPreview: false,
            htmlData: '',
            html: '',
            keyboardHeight: 370,
            editorHeight: "auto",
            isIOS: false,
			current: 0
        };
    },
    watch: {
        value: function(newvar) {
            this.html = newvar;
        },
        html: function(newvar) {
            // if (this.previewMode) {
            //     this.previewData(this.html);
            // }
            if (this.editorCtx) {
                this.editorCtx.setContents({
                    html: this.html
                });
            }
        }
    },
    created() {
        this.html = this.value;
		
		this.parseAndFormat(this.html);
    },
    mounted: function() {
        const platform = uni.getSystemInfoSync().platform;
        this.isIOS = platform === 'ios';
        if (this.previewMode) {
            this.previewData(this.html);
        }
        let keyboardHeight = 0;
   //      this.updatePosition(0);
   //      uni.onKeyboardHeightChange(res => {
   //          if (res.height === keyboardHeight) return;
   //          const duration = res.height > 0 ? res.duration * 1000 : 0;
   //          keyboardHeight = res.height;
			// if (keyboardHeight > 0) {
			// 	this.showToolbar = true;
			// } else {
			// 	this.showToolbar = false;
			// }
   //          setTimeout(() => {
   //              uni.pageScrollTo({
   //                  scrollTop: 0,
   //                  success: () => {
   //                      this.updatePosition(keyboardHeight);
   //                      // this.editorCtx && this.editorCtx.scrollIntoView();
   //                  }
   //              });
   //          }, duration);
   //      });
    },
    computed: {
        labelConfirm: function() {
            return this.showPreview ? '关闭' : '保存';
        },
        labelCancel: function() {
            return this.showPreview ? '' : '取消';
        }
    },
    methods: {
        updatePosition(keyboardHeight) {
            const { windowHeight, windowWidth, platform } = uni.getSystemInfoSync();
            const rpx = windowWidth / 750;
            let titleHeight = 0;
            //#ifdef H5
            titleHeight = 44; //H5标题栏高度
            //#endif
            const toolbarHeight = (70 * Math.ceil(this.tools.length / 15) + 1) * rpx; //底部工具栏高度

            const bodyHeight = windowHeight - titleHeight;
            // this.keyboardHeight = keyboardHeight;
            // this.editorHeight = keyboardHeight > 0 ? bodyHeight - keyboardHeight - toolbarHeight : this.autoHideToolbar ? bodyHeight : bodyHeight - toolbarHeight;
			// console.error(this.autoHideToolbar);
			// console.error(this.editorHeight);
			// console.error(this.keyboardHeight);
        },
        openColor(e) {
            let name = e.currentTarget.dataset.name;
            let color = this.formats[name];
            this.colorPickerName = name;
            if (name == 'backgroundColor' && !color) {
                color = '#FFFFFF';
            }
            if (name == 'color' && !color) {
                color = '#000ccc';
            }
            this.color = color;
			
			// console.error(this.$refs.popup);
			this.$refs.popup.open();
        },
        colorChanged(e) {
            let label = '';
            switch (this.colorPickerName) {
                case 'backgroundColor':
                    if (e.color == '#FFFFFF') {
                        e.color = '';
                    }
                    this.bgColor = e.color;
                    label = '背景色';
                    break;
                case 'color':
                    this.fontColor = e.color;
                    label = '颜色';
                    break;
            }
            this._format(this.colorPickerName, e.color, label + e.color);
        },
        readOnlyChange() {
            this.readOnly = !this.readOnly;
        },
        onEditorReady() {
            uni.createSelectorQuery()
                .in(this)
                .select('#editor')
                .context(res => {
                    this.editorCtx = res.context;
                    if (this.html) {
                        this.editorCtx.setContents({
                            html: this.html
                        });
                    }
                })
                .exec();
        },
        undo() {
            this.editorCtx.undo();
            this.toast('撤销');
        },
        redo() {
            this.editorCtx.redo();
            this.toast('重做');
        },
        format(e) {
			console.error(e);
            let { name, value, label } = e.target.dataset;
            if (!name) return;
            this._format(name, value, label);
        },
		addBold(e) {
			// console.error(e);
			this._format('bold');
		},
		addItalic() {
			this._format('italic');
		},
        _format(name, value, label) {
			console.error(name);
			console.error(value);
			if (value) {
				this.editorCtx.format(name, value);
			} else {
				this.editorCtx.format(name);
			}
            this.toast(label);
        },
        toast(label) {
            uni.showToast({
                duration: 600,
                icon: 'none',
                title: label
            });
        },
        onStatusChange(e) {
            const formats = e.detail;
			console.error(formats);
            this.formats = formats;
        },
        insertDivider() {
            this.editorCtx.insertDivider({
                success: function() {
                    this.toast('插入分割线');
                }
            });
        },
        clear() {
            this.editorCtx.clear({
                success: res => {
                    this.toast('清空');
                }
            });
        },
        removeFormat() {
            this.editorCtx.removeFormat();
            this.toast('清除格式');
        },
        insertDate() {
            const date = new Date();
            const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            this.editorCtx.insertText({
                text: formatDate
            });
            this.toast('插入日期');
        },
        insertImage() {
            let params = {};
            params.count = this.muiltImage ? 9 : 1;
            params.sizeType = this.compressImage ? ['compressed'] : ['original'];
            uni.chooseImage({
                ...params,
                success: res => {
                    res.tempFilePaths.map(path => {
                        this.imageUploader(path, url => {
                            this.editorCtx.insertImage({
                                src: url,
                                alt: '图像'
                            });
                        });
                    });
                }
            });
        },
        fontSize(e) {
            const index = e.detail.value;
            const fz = this.fontSizeRange[index] + 'px';
            this._format('fontSize', fz, '字体大小:' + fz);
        },
		changeSize(type) {
			this.$refs.picker.open();
			if (type === 'font') {
				this.sizeRange = this.fontSizeRange;
			}
			
			if (type === 'lineheight') {
				this.sizeRange = this.lineHeightRange;
			}
		},
		selectSize(size) {
			if (typeof size === 'number') {
				console.error(size);
				this._format('fontSize', size + 'px', '字体大小:' + size);
			}
			
			if (typeof size === 'object') {
				console.error(size.value);
				this._format('lineHeight', size.value + 'em', '行高:' + size.value);
			}
			
			this.$refs.picker.close();
		},
		lineHeight(e) {
			console.error(e);
		    const index = e.detail.value;
		    const fz = this.lineHeightRange[index].value + 'em';
		    this._format('lineHeight', fz, '行高:' + fz);
		},
        cancel() {
            this.$emit('cancel');
        },
        save() {
            if (this.showPreview) {
                if (this.previewMode) {
                    this.cancel();
                } else {
                    this.showPreview = false;
                }
            } else {
                this.editorCtx.getContents({
                    success: res => {
						console.error(res.html);
                        this.$emit('save', res);
                        this.$emit('input', res.html);
                    }
                });
            }
        },
		getContents(e) {
			// console.error(e);
			this.editorCtx.getContents({
			    success: res => {
					// console.error(res.html);
			        // this.$parent.richTextContents = res.html;
					this.$emit('sendContents', res.html);
			    }
			});
		},
        previewData: function(html) {
            this.htmlData = html.replace(/\<img/gi, '<img style="max-width:100%;height:auto"');
            // this.showPreview = false; // true;
        },
        preview: function() {
            this.editorCtx.getContents({
                success: res => {
                    this.previewData(res.html);
                }
            });
        },
		change() {
			this.$nextTick(() => {
				// console.error(this.$refs.color);
				this.$refs.color.open();
			})
		},
		parseAndFormat(txt) {
			// todo 有需要回显的时候再作处理吧
			return;
			let stylesheet = txt.match(/style="[^"']*?"/g);
			// console.error(stylesheet);
			stylesheet = stylesheet && stylesheet[0].split("=");
			// console.error(stylesheet);
			stylesheet = stylesheet.length > 1 && stylesheet[1].slice(1,-2);
			stylesheet = stylesheet && stylesheet.split(";");
			console.error(stylesheet);
			for (let i in stylesheet) {
				let t = stylesheet[i].split(":");
				console.error(t);
				console.error(t[1].replace(/\s+/g,''));
				this.format(t[0], t[1].replace(/\s+/,''));
			}
		}
    }
};
</script>

<style lang="scss" scoped>
@import './editor-icon.css';

.wrapper {
    padding: 10px 5px 5px;
    width: 100%;
	height: auto;
    position: relative;
    .header {
        width: 100%;
        position: fixed;
        z-index: 9;
        left: 0;
        height: 75rpx;
        /* #ifndef H5 */
        top: 0;
        /* #endif */
        /* #ifdef H5 */
        top: 44px;
        /* #endif */
    }

    .container {
        width: 100%;
        // margin-top: 75rpx;
        background: #fff;

        .ql-container {
            box-sizing: border-box;
            width: 100%;
            height: 340rpx;
            font-size: 14px;
            line-height: 1.5;
            overflow: auto;
            // padding: 20rpx;
			margin-top: 10rpx!important;
			// padding-bottom: 100rpx;
			min-height: 340rpx;
        }
    }

    .toolbar {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: -20rpx;
		z-index: 1;
        box-sizing: border-box;
        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        background-color: #fff;
        border-top: 1px solid #eee;
        line-height: 50rpx;

        .iconfont {
            display: inline-block;
            padding: 10rpx 0;
            // width: 50rpx;
            text-align: center;
            font-size: 34rpx;
            box-sizing: border-box;
			margin-left: 5px;
			
			.font-text {
				font-size: 12px;			}
        }
    }
}

.preview {
    width: 100%;
    margin-top: 90rpx;

    .previewNodes {
        width: 100%;
        word-break: break-all;
    }
}

.ql-active {
    color: #06c;
}
</style>
